#{extends 'template.html'/}
<style>
.pagination{
margin-left:32%;

}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery-ui-1.10.4.custom.min.css'}">
 
	
<body style="margin: 0px;padding: 0px; font-style: courier" >

  

	#{include 'main.html'/}
	
	<div  style=" width: 100%;height: 64%; padding: 0% 0% 0% 15%; ">

	 

		<div class="bod" id="largeData" style="float: left;width: 82%; ">
  
  <h3>&{'projetos'}</h3>
     
     <table class="table table-hover">
     <thead>
     <tr >
     <th>&{'projetos'}</th>
     <th>&{'tipos'}</th>
     <th>&{'idioma'}</th>
     <th>&{'capitulos'}</th>
     <th>Publicado</th>
     <th></th>
     </tr>

</thead>
<tbody>
#{paginate.list items:projetos, as:'product'} 
   
     <tr>
     <td>
  		<a href="@{Projetos.projeto(product)}" >${product.pro_titulo} <img id="ctl00_XXX" src="${product?.pro_caminho_ima}" width='30' height='30' style="border: 0; float: left; margin-right: 15px" /></a>
  	 </td>
  	 <td>
  	 	<span class="badge" data-toggle="tooltip" title="De acordo com o tipo do projeto as opções para criar o mesmo e para visualiza-lo serão diferentes" >${product.pro_tipo}</span>
  	 </td>
  	   <td>
  	 	<span class="badge" data-toggle="tooltip" title="Idioma">${product.pro_idioma}</span>
  	 </td>
  	 <td>
  	 	<span class="badge" data-toggle="tooltip" title=&{'tooltipQtdCap'}>${product.pro_capitulos}</span>
  	 </td>
  	 <td>
  		<span class="${product.pro_publicado =~ "Sim" ? 'label label-success' : 'label label-warning'}">${product.pro_publicado} </span>
  	 </td>
  	 <td>
  	 	<a href="@{Projetos.configProjeto(product)}"  data-toggle="tooltip" title="Altere as configurações do seu projeto"><img id="ctl00_XXX" src="@{'/public/images/config.png'}" width='20' height='30' style="border: 0; float: left; margin-right: 15px" /></a>
  	 </td>
  	 </tr>
  	  #{/paginate.list} 
  	 #{if qtdProjetos>6}
  	   #{paginate.controls items:projetos /} 
  	   #{/if}
  	 </tbody>
  		</table>
	
	

  
   	 #{form @Projetos.addProjeto(),enctype:'multipart/form-data' }
   	 
   	 <div class="form-group">
   	 <h4>&{'tituloProjeto'}</h4>
    	<input class="form-control" type="text" id="inp" name="projeto.pro_titulo"/>
    	<h4>&{'generoProjeto'}</h4>
    	<select class="form-control" name="projeto.pro_genero">
          <option>Romance</option>
          <option>Policial</option>
          <option>Horror</option>
           <option>Ficcao</option>
           <option>Infantil</option>
           <option>Poesia</option>
           <option>Novela</option>
      </select>
      <h4>&{'tipoProjeto'}</h4>
    	<select class="form-control" name="projeto.pro_tipo">
          <option value="Livro">&{'livro'}</option>
          <option value="Roteiro">Roteiro</option>
          <option value="Quadrinho">Quadrinho</option>
           <option value="solo">Aventura Solo</option>
      </select>
       <h4>&{'idioma'}</h4>
    	<select class="form-control" name="projeto.pro_idioma">
          <option>&{'portugues'}</option>
          <option>&{'frances'}</option>
          <option>&{'ingles'}</option>
           <option value="solo">&{'espanhol'}</option>
      </select>
      <h4>Adicionar Resumo</h4>
      <input class="form-control" type="text" id="inp" name="projeto.pro_resumo"/>
    	
       <h4>Publicado</h4>
    	<select class="form-control" name="projeto.pro_publicado">
          <option value="sim">Sim</option>
           <option value="não">Não</option>
      </select> 
      <h4>&{'addCapa'}</h4><img id="uploadPreview1" width='100' height='100' src="${projeto?.pro_imagem}" /><br />
		<input class="btn btn-default" id="uploadImage1" type="file" name="projeto.pro_imagem" onchange="PreviewImage(1);" />  
      
        <input type="hidden"  name="projeto.pro_nome_usuario" value="${user.usu_nome}"/>
      
         <input type="submit" value=&{'criar'} class="btn btn-primary"></input>
         </div>
	#{/form}   
	

	

</div>




       
<script src="@{'/public/javascripts/autocomplete-value.js'}" type="text/javascript" charset="utf-8"></script>
   <script src="@{'/public/javascripts/jquery-ui-1.10.4.custom.min.js'}" type="text/javascript" charset="utf-8"></script>
   
    <script type="text/javascript">
    function PreviewImage(no) {
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage"+no).files[0]);

        oFReader.onload = function (oFREvent) {
            document.getElementById("uploadPreview"+no).src = oFREvent.target.result;
        };
    }
</script>   
	<script src="@{'/public/javascripts/autocomplete.js'}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  $(function () {
$(function () { $("[data-toggle='tooltip']").tooltip(); });
    var $contextMenu = $("#contextMenu");
    var $rowClicked;

    $("body").on("contextmenu", "table tr", function (e) {
        $rowClicked = $(this)
        $contextMenu.css({
            display: "block",
            left: e.pageX,
            top: e.pageY
        });
        return false;
    });
function MinhaFuncao() {
document.getElementById("coautor").append="Voce clicou no botao!";
}
    $contextMenu.on("click", "a", function () {
        var message = "You clicked on the row '" + 
            $rowClicked.children("*")[1].innerHTML + "'\n"
        message += "And selected the menu item '" + $(this).text() + "'"
       
        $contextMenu.hide();
    });

    $(document).click(function () {
        $contextMenu.hide();
    });

});
</script>

</div>

        
</body>

